<template>
  <div class="form__wrapper">
    <base-form
      ref="form"
      :label-width="'110px'"
      column="single"
      :form-list="formList"
      :form-rules="formRules"
      :form-disabled="formDisabled" />
    <div class="actions">
      <el-button type="primary" size="small" @click="submit" :loading="submitLoading" :disabled="formDisabled">提交</el-button>
      <el-button type="default" size="small" @click="cancel" :disabled="formDisabled">取消</el-button>
    </div>
  </div>
</template>

<script>
import BaseForm from '@/components/BaseForm'

import { dict_productionType } from '@/utils/dictionary'
import { getProductionDetailApi, modifyProductionApi } from '@/api/modules/production'

export default {
  name: 'ProductionCreate',
  components: { BaseForm },

  props: {
    id: {
      type: [Number, String],
      required: true
    }
  },
  data () {
    return {

      detail: {
        code: null,
        name: null,
        type: null,
        interfaceNum: null,
      },
      
      formList: [
        { label: '产品编号', prop: 'code', disabled: true },
        { label: '产品名称', prop: 'name' },
        { label: '产品类型', prop: 'type', type: 'select', options: dict_productionType },
        { label: '接口数量', prop: 'interfaceNum', type: 'number', min: 1, max: 20 },
      ],

      formRules: {
        code: [
          { required: true, message: '产品编号不能为空', trigger: ['blur', 'change'] },
          { max: 50, message: '产品编号不能超过50个字符', trigger: ['blur', 'change'] }
        ],
        name: [
          { required: true, message: '产品名称不能为空', trigger: ['blur', 'change'] },
          { max: 50, message: '产品名称不能超过50个字符', trigger: ['blur', 'change'] }
        ],
        type: [
          { required: true, message: '产品类型不能为空', trigger: ['blur', 'change'], type: 'number' },
        ],
        interfaceNum: [
          { required: true, message: '接口数量不能为空', trigger: ['blur', 'change'], type: 'number' },
        ],
      },

      submitLoading: false,
      formDisabled: true
    }
  },
  methods: {
    async getDetail () {
      try {
        const params = { id: this.id } 
        // const res = await getProductionDetailApi(params)
        // this.detail = res.data

        this.detail = {
          code: 'asds',
          name: 'asd',
          type: 1,
          interfaceNum: 10,
        }

        this.$refs['form'].setFormData(this.detail)

        this.formDisabled = false
      } catch (err) {
        console.error(err)
      }
    },
    submit () {
      
      this.$refs['form'].validate(async valid => {
        if(valid) {
          try {
            this.submitLoading = true
            const params = this.$refs['form'].getFormData()
            await modifyProductionApi(params)
            this.$message({ type: 'success', message: '添加成功' })
            this.$emit('success')
          } catch (err) {
            console.error(err)
          }
          this.submitLoading = false
        }
      })
    },
    cancel () {
      this.$emit('close')
    }
  },
  mounted () {
    this.getDetail()
  }
}
</script>

<style lang="less" scoped>
@import '../../styles/form.less';
</style>